<template>
<div class="wrapper">
  <HeaderCom></HeaderCom>
  <MenuCom></MenuCom>
  <div class="swing-decorate swing-decorate1"></div>
  <div class="swing-decorate swing-decorate2"></div>
  <ContentCom></ContentCom>
  <SystemsetsmCom></SystemsetsmCom>
  <SwitchDeptWinCom></SwitchDeptWinCom>
  <messagesmodal></messagesmodal>
  <remindModalCom></remindModalCom>
  <recommendedBrowserCom></recommendedBrowserCom>
  <FooterCom></FooterCom>
  <ToolbarproCom></ToolbarproCom>
</div>
</template>

<script>
  import store from '../store/store';
  import {mapActions} from 'vuex';
  import {
    GET_customMenus,
    GET_indexMenu
  } from '../store/menus/type'
  import Vue from 'vue'
  import HeaderCom from './hearder/HeaderCom'
  import MenuCom from './menu/MenuCom'
  import ContentCom from './content/ContentCom'
  import SystemsetsmCom from './systemsetsm/SystemsetsmCom'
  import SwitchDeptWinCom from './switchdeptwin/SwitchDeptWinCom'
  import messagesmodal from './switchdeptwin/messagesmodal'
  import remindModalCom from './remindmodal/remindModalCom'
  import recommendedBrowserCom from './recommendedbrowser/recommendedBrowserCom'
  import FooterCom from './footer/FooterCom'
  import ToolbarproCom from './toolbarpro/ToolbarproCom'
  import SectionCom from './content/SectionCom'
  export default {
    name: 'Home',
    store,
    data () {
      return {

      }
    },
    methods:{
      ...mapActions('menusStore',[GET_customMenus,GET_indexMenu])
    },
    created(){
      this.GET_customMenus();
      this.GET_indexMenu();
    },
    mounted(){
      let that = this;
      Ext.onReady(function () {

        Ext.Loader.setConfig({enabled: true});

        Ext.QuickTips.init();
        document.getElementById('content').innerHTML = '';
        let tabPanel = Ext.create('Dpap.main.TabPanel', {
          items: [{
            title: '首页',
            iconCls: 'home-page',
            tabConfig: {width: 120},
            closable: false,
            id: 'T_home',
            layout: 'fit',
            cls: 'autoHeight',
            bodyCls: 'autoHeight',
            html: '',
            width: '100%'
          }],
          renderTo: Ext.getElementById("content")
        });
        let Preview = Vue.extend(SectionCom);
        let instance;
        if(!that.elm){
          that.elm = new Preview();
          instance = that.elm.$mount();
          document.getElementById('T_home-body').appendChild(instance.$el)
        }
        // logo绑定首页事件
        Ext.getElementById('logo').onclick = function () {
          tabPanel.setActiveTab(tabPanel.child('#T_home'));
        };
      });
      let doms = document.querySelectorAll('.modal');
      for(let i = 0;i < doms.length;++i){
        doms[i].onclick = function (e) {
          if(e.target.classList.contains('modal') || e.target.classList.contains('close')){
            this.style.display = 'none';
          }
        }
      }

    },
    components:{
      HeaderCom:HeaderCom,
      MenuCom:MenuCom,
      ContentCom:ContentCom,
      SystemsetsmCom:SystemsetsmCom,
      SwitchDeptWinCom:SwitchDeptWinCom,
      messagesmodal:messagesmodal,
      remindModalCom:remindModalCom,
      recommendedBrowserCom:recommendedBrowserCom,
      FooterCom:FooterCom,
      ToolbarproCom:ToolbarproCom,
      SectionCom:SectionCom
    }
  }
</script>

<style scoped>

</style>
